Blog.

One of the everyday issues of a web programmer is validating forms. One can choose to what extent to validate and the needs of the project usually determine that, but Javascript validation is a fundamental part of that. Any good form uses some level of Javascript validation and, as in my case, make extensive use of plugins such as jQuery validate(). The extensibility of this package is simple and effective but one of the bugaboos I recently came across was how Javascript and jQuery validate() handles regex validation.

My method of building regex validation usually involves using the embedded methods and, in this case, the "pattern" method that allows a regular expression to be passed for boolean evaluation. Now, you would think that this is a fairly simple process to write, and, for the most part, it is. However, even after writing and testing an expression using this tool (which is usually rock-solid), I was unable to get an expression to work when implementing it using the jQuery validate method.

So, after much frustration and profligate use of the backspace button, I decided to use the extensiblity of validate() and write my own custom method using AJAX to let my Cold Fusion server handle the regex validation using the reFind() method. It was the equivalent of bypassing Mom to ask Dad for the keys to the car. By creating this extension, I was able to write an extremely simple evaluation and then return the boolean response that my Javascript validation needed. The even better part of this is that, since ultimately it's Cold Fusion's evaluation that matters when the information is handled after form submission, it removes the possiblity for data anomalies due to having different languages handle the same evaluation.

I have begun to make this a habit when writing regex evaluations for Javascript validation since it's extremely easy to do. I've posted the code below as my example. Notice that in the ColdFusion snip I've chosen to return the value as a string instead of a boolean based on Cold Fusion's nasty habit of returning 'YES' and 'NO' for boolean evaluations. 

Please feel free to use it or improve on it as you wish and provide any feedback.

Happy coding!

Javascript AJAX snip:
// put this before your $(document).ready() function
$.validator.addMethod("item_price_valid",function(value,element) {
    var _true;
    $.ajax({
        url: "/custom/com/clearance_center.cfc?method=validateItemPrice&returnformat=plain",
        method: "post",
        data: "item_price="+$("#item_price").val(),
        async: false,
        success: function(response) {
            _true = (response == 'true');
        }
    });
    return _true;
});

// add to your validate call
$("#  myForm").validate({
    rules: {
        "item_price" : {
            required : true,
            "item_price_valid": true
        }
    },
    messages: {
        item_price : {
            item_price_valid : "Please enter a valid price in 999.99 format"
        }
    }
});                 

ColdFusion snip

component displayname="my" name="clearance_center" {
// validate a currency value via AJAX
// local.arr contains the argument provided split into an array using the '.' character.
// If the array is not 2 positions in length, return false.
// If length of the string in position 1 of the array is 0, return false;
// If length of the string in position 2 of the array does not equal 2, return false;
// If string in position 1 or 2 of the array cannot be evaluated as numeric, return false;
// If string in first position can be evaluated as 0, return false


remote boolean function validateItemPrice() {
    local.arr = listToArray(trim(arguments.item_price),'.');
        if( arrayLen(local.arr) != 2 || (len(local.arr[1]) == 0 || len(local.arr[2]) != 2) || (!isNumeric(local.arr[1])) || !isNumeric(local.arr[2]) || local.arr[1] == 0) {
            return false;
        }
        return true;
    }
}     

 

posted 03/21/2018 in ColdFusion

Tags: jQuery, AJAX, javascript, form validation, email validation, coldfusion